<%@ page pageEncoding="UTF-8" contentType="text/html; UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>商品搜索</title>
    <link rel="stylesheet" href="../css/search/search.css">
    <link rel="stylesheet" href="../css/search/layout.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap-4.6.0-dist/css/bootstrap.min.css"/>
    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../css/search/msg-alert.js" type="text/javascript" charset="utf-8"></script>
<%--    <script src="https://cdn.jsdelivr.net/npm/msg-alert"></script>--%>
    <style type="text/css">
        .img-product {
            width: 100%;
            /* height: auto; */
            transform: scale(1);
            transition: transform 1s ease 0s;
        }
        .img-product:hover {
            transform: scale(1.3);
        }
    </style>
</head>
<body>
<%@include file="../resources/nav.jsp"%>
<div class="container" style="margin-top: 80px;" >
        <div class="col-md-12 ">
            <form action="#" class="form-inline pull-right" role="form">
                <div class="form-group">
                    <input type="text" class="form-control" id="search" style="width: 300px;height: 30px;" name="search" placeholder="请输入商品名称进行搜索">
                </div>
                <button type="submit" style="width: 50px;height: 30px;" class="btn btn-primary"><span class="fa fa-search"></span></button>
            </form>
        </div>
    <div class="col-md-12" style="font-size: 12px;"><strong>${requestScope.search}</strong>&nbsp;搜索结果：</div>
    <c:choose>
        <c:when test="${requestScope.page.total == 0}">
            <div class="col-md-12" style="margin-top: 20px;font-size: 12px;">没有找到相关商品！</div>
            <!-- 显示empty图片 -->
            <div class="col-md-12" style="margin-top: 20px">
                <img src="../img/empty.png" alt="empty" style="width: 60%;height: auto;">
            </div>
        </c:when>
        <c:otherwise>
            <div class="col-md-12" style="margin-top: 20px">
                <c:forEach var="p" items="${requestScope.page.list}">
                    <div class="col-md-3">
                        <div class="goods-panel" style="border-radius: 12px;box-sizing: border-box;">
                            <img class="img-product" src="${p.imageUrl}" width="200px" height="200px" style="object-fit: scale-down"/>
                            <p class="text-row-2" style="margin-top: 10px;font-size: 12px;"><strong>商品名称：</strong><a href="/Mall/product/info?id=${p.id}" style="font-size: 14px;">${p.name}</a></p>
                            <p class="text-row-2" style="font-size: 12px;"><strong>商品简介：</strong>${p.info}</p>
                            <p class="text-row-2" style="font-size: 12px;"><strong>商品价格：</strong><span style="font-size: 8px;color:#f40;">¥</span><span style="color:#f40;font-size: 14px;">${p.price}</span></p>
                            <p class="text-row-1" style="font-size: 12px;"><strong>上架日期：</strong><i><fmt:formatDate value="${p.addDate}" pattern="yyyy-MM-dd"/></i></p>
                            <span>
						<a href="/Mall/product/info?id=${p.id}" class="btn btn-outline-info btn-xs add-fav"><span class="fa fa-info-circle" style="margin-right: 1px;"></span>商品详情</a>
						<button class="btn btn-outline-success btn-xs add-cart" onclick="addCart('${p.id}', '${p.name}', ${p.price}, 1)"><span class="fa fa-cart-arrow-down" style="margin-right: 1px;"></span>加入购物车</button>
                </span>
                        </div>
                    </div>
                </c:forEach>
            </div>
            <div class="col-md-offset-1 col-md-10">
                <p align="center">
                    <c:if test="${requestScope.page.pageNum <=1}">
                        <a class="btn btn-outline-primary" href="#">上一页</a>
                    </c:if>
                    <c:if test="${requestScope.page.pageNum > 1}">
                        <a class="btn btn-outline-primary" href="/Mall/product/search?pageNum=${requestScope.page.pageNum-1}&pageSize=${requestScope.page.pageSize}&search=${requestScope.search}">上一页</a>
                    </c:if>
                    <span>
				&nbsp;&nbsp;第 ${requestScope.page.pageNum} 页&nbsp;&nbsp;
			</span>
                    <c:if test="${requestScope.page.isLastPage}">
                        <a class="btn btn-outline-primary" href="#">下一页</a>
                    </c:if>
                    <c:if test="${!requestScope.page.isLastPage}">
                        <a class="btn btn-outline-primary" href="/Mall/product/search?pageNum=${requestScope.page.pageNum+1}&pageSize=${requestScope.page.pageSize}&search=${requestScope.search}">下一页</a>
                    </c:if>
                </p>
            </div>
        </c:otherwise>
    </c:choose>
</div>
</body>
<script type="text/javascript">
    function getCookie(cookieName) {
        const strCookie = document.cookie
        const cookieList = strCookie.split(';')
        for(let i = 0; i < cookieList.length; i++) {
            const arr = cookieList[i].split('=')
            if (cookieName === arr[0].trim()) {
                return arr[1]
            }
        }
        return ''
    }
    // 加入购物车
    function addCart(id, name, price, num) {
        // 从Cookie获取用户名称，username	admin
        var username = getCookie("username");
        //console.log(username);
        // 发送Ajax请求到CartAddServlet
        $.ajax({
            url: "/Mall/cart/add",
            type: "post",
            data: {
                "id": id,
                "name": name,
                "price": price,
                "num": num,
                "username": username
            },
            success: function (data) {
                if (data === "true") {
                    message({type:'success',text:'加入购物车成功！', duration: 5000})
                } else {
                    message({type:'success',text:'加入购物车失败！', duration: 5000})
                }
            }
        });
    }
    $(function() {
        /*商品列表，鼠标移入时加阴影、移出移除阴影*/
        $(".goods-panel").hover(function() {
            $(this).css("box-shadow", "0px 0px 8px #888888");
        }, function() {
            $(this).css("box-shadow", "");
        })
        //加入收藏时，♥的实心空心切换
        // $(".add-fav").toggle(function() {
        //     $(this).html("<span class='fa fa-heart'></span>取消收藏");
        // }, function() {
        //     $(this).html("<span class='fa fa-heart-o'></span>加入收藏");
        // })
    })
</script>
</html>
